<template>
    <div class="3dTilesNewYorkCity3dBuildings">
        <cesium-viewer @viewerAlready="viewerAlready">
            <template v-slot:slotAfter>
                <html-info-box
                        title="建筑信息"
                        :info="infoText"
                        :x="posX"
                        :y="posY"
                        :infoVisible.sync="infoShow"
                />
            </template>
        </cesium-viewer>
    </div>
</template>

<script>
    import CesiumViewer from "../../CesiumViewer";
    import HtmlInfoBox from "../../HtmlInfoBox";

    export default {
        name: "3dTilesNewYorkCity3dBuildings",
        //import引入的组件需要注入到对象中才能使用",
        components: {HtmlInfoBox, CesiumViewer},
        data() {
            //这里存放数据",
            return {
                infoText: [],
                posX: 0,
                posY: 0,
                infoShow: false
            };
        },
        //监听属性 类似于data概念",
        computed: {},
        //监控data中的数据变化",
        watch: {},
        //方法集合",
        methods: {
            viewerAlready() {
                viewer.scene.globe.depthTestAgainstTerrain = true;
                this.setCamera();
                this.tileSet();
                this.pickTileProperty();
            },
            setCamera() {
                // Set the initial camera view to look at Manhattan
                let initialPosition = Cesium.Cartesian3.fromDegrees(
                    -74.01881302800248,
                    40.69114333714821,
                    753
                );
                let initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(
                    21.27879878293835,
                    -21.34390550872461,
                    0.0716951918898415
                );
                viewer.scene.camera.setView({
                    destination: initialPosition,
                    orientation: initialOrientation,
                    endTransform: Cesium.Matrix4.IDENTITY,
                });
            },
            tileSet() {
                // Load the NYC buildings tileset
                let tileSet = new Cesium.Cesium3DTileset({
                    url: Cesium.IonResource.fromAssetId(75343),
                    maximumScreenSpaceError: 2,        //最大的屏幕空间误差
                    maximumNumberOfLoadedTiles: 1000,  //最大加载瓦片个数
                });
                const tileset3DTile = viewer.scene.primitives.add(tileSet);
                tileset3DTile.readyPromise.then(
                    () => {
                        tileset3DTile.style = new Cesium.Cesium3DTileStyle({
                            color: {
                                conditions: [
                                    ['${Height} >= 300', 'rgba(67,241,30,0.8)'],
                                    ['${Height} >= 200', 'rgba(17,131,255,0.8)'],
                                    ['${Height} >= 100', 'rgba(241,103,32,0.8)'],
                                    ['${Height} >= 50', 'rgba(241,160,101,0.8)'],
                                    ['${Height} >= 0', 'rgba(240,255,0,0.8)'],
                                ]
                            }
                        });
                    }
                )
            },
            pickTileProperty() {
                const _this = this;
                let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
                let oldFeature=null;
                let oldColor =null;
                handler.setInputAction(function (movement) {
                    if (oldFeature!=null){
                        oldFeature.color=oldColor;
                    }
                    let feature = viewer.scene.pick(movement.position);
                    oldFeature = feature;
                    oldColor = feature.color;
                    feature.color= Cesium.Color.GHOSTWHITE;
                    const pos = movement.position;
                    if (Cesium.defined(feature) && feature instanceof Cesium.Cesium3DTileFeature) {
                        _this.infoText = [];
                        _this.posX = pos.x;
                        _this.posY = pos.y;
                        let propertyNames = feature.getPropertyNames();
                        // console.log(propertyNames);
                        let length = propertyNames.length;
                        for (let i = 0; i < length; ++i) {
                            let propertyName = propertyNames[i];
                            // console.log(propertyName + ": " + feature.getProperty(propertyName));
                            _this.infoText.push([propertyName, feature.getProperty(propertyName)]);
                        }
                        // console.log(_this.infoText);
                        _this.infoShow = true;
                    }
                }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
            }
        },
        //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
        beforeCreate() {
        },

        //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
        created() {

        },
        //生命周期 - 挂载之前",html模板未渲染
        beforeMount() {

        },

        //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
        mounted() {

        },

        //生命周期 - 更新之前",数据模型已更新,html模板未更新
        beforeUpdate() {

        },
        //生命周期 - 更新之后",数据模型已更新,html模板已更新
        updated() {

        },
        //生命周期 - 销毁之前",
        beforeDestroy() {

        },
        destroyed() {

        },
        //生命周期 - 销毁完成",
        //如果页面有keep-alive缓存功能，这个函数会触发",
        activated() {

        },
    }

</script>

<style>

</style>

